<template>
  <avue-crud ref="withdrawRef" :table-loading="tableLoading" :option="option" @refresh-change="withdrawList"
    :data="data" :page="page" @size-change="sizeChange" @current-change="currentChange" @search-change="searchChange"
    @search-reset="searchReset" :cell-style="cellStyle">
    <template #menu="{ row }">
      <el-button type="primary" text @click="userDetail(row)">详细</el-button>
      <el-button type="primary" text @click="audit(row)" v-if="row.status == 1 || row.status == 5">审核</el-button>
    </template>
  </avue-crud>

  <el-dialog v-model="auditVisible" title="提现审核" width="400" :show-close="false">
    <el-form ref="auditFormRef" :model="auditForm" :rules="auditRule" label-width="auto">
      <el-form-item label="订单号">{{ auditForm.orderId }}</el-form-item>
      <el-form-item label="用户ID">{{ auditForm.userId }}</el-form-item>
      <el-form-item label="手机号">{{ auditForm.mobile }}</el-form-item>
      <el-form-item label="提现渠道">{{ auditForm.channel }}</el-form-item>
      <el-form-item label="提现金额">{{ auditForm.amount / 100 }}</el-form-item>
      <el-form-item label="提现时间">{{ auditForm.updatedAt }}</el-form-item>
      <el-form-item label="审核状态" prop="status">
        <el-select v-model="auditForm.status" placeholder="请选择审核状态">
          <el-option v-for="item in auditStatus" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="提现通道" prop="channel">
        <el-select v-model="auditForm.channel" placeholder="提现通道修改">
          <el-option v-for="item in passLine" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelAudit(auditFormRef)">取消</el-button>
        <el-button type="primary" @click="confirmAudit(auditFormRef)"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>

  <DetailDialog :visible="detailVisible" v-model="detailVisible" :detailData="detail_data"
    @update:visible="detailVisible = $event" />
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import DetailDialog from '@/components/DetailDialog.vue';
import { withdrawRecord, withdrawAudit, getUserFlow, getUserInfo } from "@/apis/admin";
import withdraw from "@/options/withdraw";
import { ElMessage } from "element-plus";
const tableLoading = ref(false);
const option = withdraw;
const flowOption = {
  index: true,
  border: true,
  stripe: true,
  height: "350",
  menuAlign: "center",
  loadingText: "加载中...",
  loadingSpinner: "svg",
  loadingSvgViewBox: "-10, -10, 50, 50",
  loadingBackground: "rgba(122, 122, 122, 0.6)",
  menu: false,
  addBtn: false,
  delBtn: false,
  editBtn: false,
  column: [
    {
      label: "服务",
      prop: "service",
    },
    {
      label: "服务编码",
      prop: "gameCode",
      minWidth: 130,
    },
    {
      label: "动账前",
      prop: "beforeGold",
      formatter: (row, value, column) => {
        return row.beforeGold / 100;
      },
    },
    {
      label: "动账后",
      prop: "afterGold",
      formatter: (row, value, column) => {
        return row.afterGold / 100;
      },
    },
    {
      label: "金额变化",
      prop: "changeGold",
      formatter: (row, value, column) => {
        return row.changeGold / 100;
      },
    },

    {
      label: "动账时间",
      prop: "createdAt",
      minWidth: 130,
      formatter: (row, value, column) => {
        return formatDate(row.createdAt * 1000, "-");
      },
    },
    {
      label: "原因",
      prop: "reason",
      minWidth: 130
    },
  ],
};
const auditStatus = [
  {
    value: 2,
    label: "通过",
  },
  {
    value: 3,
    label: "拒绝",
  },
];
const passLine = [
  {
    value: 'tigo-gh',
    label: 'tigo-gh'
  },
  {
    value: 'vodafone-gh',
    label: 'vodafone-gh'
  },
  {
    value: 'MTN-gh',
    label: 'MTN-gh'
  },
]
const auditVisible = ref(false);
const audit = (data) => {
  auditForm.value = {
    ...data,
    updatedAt: formatDate(data.updatedAt * 1000, "-"),
    status: "",
  };
  auditVisible.value = true;
};
const auditFormRef = ref(null);
const auditForm = ref({
  orderId: "",
  userId: "",
  mobile: "",
  amount: "",
  channel: "",
  updatedAt: "",
  status: "",
});
const auditRule = reactive({
  status: [{ required: true, message: "请选择审核状态", trigger: "change" }],
});
const cancelAudit = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  auditVisible.value = false;
};
const confirmAudit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      withdrawAudit
        .post("", {
          orderId: auditForm.value.orderId,
          status: auditForm.value.status,
          channel: auditForm.value.channel
        })
        .then((res) => {
          if (res.code == 200) {
            ElMessage.success("审核完成!");
            formEl.resetFields();
            auditVisible.value = false;
            withdrawList();
          }
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
const page = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
  searchInfo: {},
});
const data = ref([]);
const searchChange = (form, done) => {
  page.searchInfo = form;
  page.currentPage = 1;
  withdrawList();
  done();
};
const searchReset = () => {
  page.searchInfo = {};
  page.currentPage = 1;
  withdrawList();
};
const sizeChange = (val) => {
  page.pageSize = val;
  withdrawList();
};
const currentChange = (val) => {
  page.currentPage = val;
  withdrawList();
};
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex == 10) {
    let res = {
      color: "green",
      fontWeight: "bold",
      fontSize: "20",
    }
    switch (row.status) {
      case 1:
        res.color = '#409eff'
        break;
      case 2:
        res.color = 'green'
        break;
      case 3:
        res.color = '#f00'
        break;
      case 4:
        res.color = '#9E9E9E'
        break;
      case 5:
        res.color = '#e91e63'
        break;
      default:
        break;
    }
    return res
  }
};
const withdrawList = () => {
  tableLoading.value = true;
  withdrawRecord
    .post("", {
      page: page.currentPage,
      pageSize: page.pageSize,
      searchInfo: page.searchInfo,
      orderKey: "created_at",
      orderType: "desc",
    })
    .then((res) => {
      tableLoading.value = false;
      if (res.code == 200) {
        data.value = res.data.list || [];
        page.total = res.data.total;
      }
    });
};
const formatDate = (date, cut) => {
  var date = new Date(date);
  var YY = date.getFullYear() + cut;
  var MM =
    (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + cut;
  var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hh = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  var mm = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
  var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return YY + MM + DD + " " + hh + mm + ss;
};
onMounted(() => {
  withdrawList();
});


const detailVisible = ref(false);
const detail_data = ref({});
const flowUserId = ref("");
const flow_loading = ref(false);

const userDetail = (data) => {
  flowUserId.value = data.userId;
  flow_loading.value = true;
  getUserInfo.post("", {
    userId: data.userId
  }).then((res) => {
    detail_data.value = res.data;
    detailVisible.value = true;
  })
};



</script>
